<template>
    <div class="work-box" style="width:100%">
        <el-input v-model="dataForm.name" placeholder="请输入名称搜索" clearable @input.self="searchHandle" type="text" />
        <div v-if="workList.length > 0">
          
            <div v-for="(item, index) in workList" :key="index" class="work-list">
                <p>{{ item.label }}（{{ item.departmentName }}）</p>
                <div class="check-box" @click="selectWork(index, item)">
                    <img :src="selectIcon" alt v-if="item.isSelect" />
                    <img :src="noSelectIcon" alt v-else />
                </div>
            </div>
        </div>
        <div class="no-data" v-else>暂无数据</div>
    </div>
</template>
<script setup>
import api from "@/api/index";
import selectIcon from '@/assets/images/check_select.png'
import noSelectIcon from '@/assets/images/check_no_select.png'
import { useUserStore } from '@/store/modules/user'
import { onMounted } from "vue";

const user = useUserStore()

const emit = defineEmits(['on-update'])

const workList = ref([])

const workListSave = ref([])

const dataForm = ref({
    name:''
})

// 选择岗位
const selectWork = (index, item) => {
    workList.value[index]['isSelect'] = !workList.value[index]['isSelect']
    let list = workList.value.filter(item => item.isSelect)
    emit('on-update', list)

}
const searchHandle = (val) => {
    if (val && val != '') {
        workList.value = workListSave.value.filter(item => item.label.includes(val))
    } else {
        workList.value = workListSave.value
    }
}
onMounted(() => {
    setTimeout(() => {
        const positionsList = JSON.parse(JSON.stringify(user.workerPositionList))
        workList.value = positionsList
        workListSave.value = positionsList
    },300)
 
})

</script>

<style scoped lang="scss">
.work-box {
    height: 450px;
    overflow-y: auto;

    .work-list {
        margin: 0;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f5ff;
        padding: 0 10px;

        &:hover {
            background: #dcdfe6;
        }

        p {
            font-size: 14px;
            flex: 1;
            margin: 5px 0;
        }

        .check-box {
            img {
                width: 15px;
                height: 15px;
                margin-left: 15px;
                cursor: pointer;
            }
        }
    }
}

.no-data {
    color: #666;
    font-size: 14px;
    margin-top: 40px;
    text-align: center;
}
</style>
